<template>
  <el-row>
    <el-col :span="6">
      <el-menu
          default-active="/class"
          class="el-menu-vertical-demo"
          style="width: 100%;height: 100%"
          @select="handleSelect"
      >
        <h5 class="mb-2">自习室选座系统</h5>
        <el-menu-item index="/class">
          <el-icon><icon-menu /></el-icon>
          <span>教室列表</span>
        </el-menu-item>
        <el-menu-item index="/history">
          <el-icon><document /></el-icon>
          <span>历史记录</span>
        </el-menu-item>
        <el-menu-item index="/user">
          <el-icon><user /></el-icon>
          <span>个人中心</span>
        </el-menu-item>
        <el-menu-item index="/inbox" v-if="isAdmin">
          <span>意见反馈收件箱</span>
        </el-menu-item>
        <el-menu-item index="/feedBack" v-if="!isAdmin">
          <span>意见反馈</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="18">
      <router-view></router-view>
    </el-col>
  </el-row>
</template>

<script>
import {onMounted, ref} from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting, User,
} from '@element-plus/icons-vue'
import router from "@/router";

export default {
  name:'App',
  components: {Document, User,IconMenu},
  setup(){
    const isAdmin = ref(false)
    const activeIndex = ref('1')
    onMounted(()=>{
      console.log(sessionStorage.getItem('Type'))
      if(sessionStorage.getItem('Type')==1){
        isAdmin.value = true
      }
    })
    const handleSelect = (keyPath) => {
      console.log(keyPath)
      router.push(keyPath)
    }
    const debounce = (fn, delay) => {
      let timer = null;
      return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
          fn.apply(context, args);
        }, delay);
      }
    }
    const _ResizeObserver = window.ResizeObserver;
    window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
      constructor(callback) {
        callback = debounce(callback, 16);
        super(callback);
      }
    }
    return{
      activeIndex,
      isAdmin,
      handleSelect,
      Setting,
      Document,
      Location,
      IconMenu
    }
  }

}
</script>

<style>
.demo-tabs > .el-tabs__content {
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs2 > .el-tabs__content {
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
  height: 1000px;
}
.item{
  width: 120px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
